<template>
    <view
        class="cl-tabbar"
        :style="{
            backgroundColor,
            borderTopColor: borderStyle
        }"
    >
        <slot></slot>
    </view>
</template>

<script>
export default {
    componentName: 'ClTabbar',
    props: {
        value: String,
        color: {
            type: String,
            default: '#7A7E83'
        },
        selectedColor: {
            type: String,
            default: '#2B2E3D'
        },
        borderStyle: {
            type: String,
            default: 'white'
        },
        backgroundColor: {
            type: String,
            default: '#ffffff'
        }
    },

    data() {
        return {
            name: null
        };
    },

    watch: {
        value: {
            immediate: true,
            handler(val) {
                this.name = val;
            }
        },

        name(val) {
            this.$emit('input', val);
            this.$emit('change', val);
        }
    },

    created() {
        this.$on('change', name => {
            this.name = name;
        });

        this.$on('insert', name => {
            if (!this.name) {
                this.name = name;
            }
        });
    }
};
</script>
